/* ================= 全局变量 ================= */
:root {
  --primary-color: #31c27c;
}

/* ================= 全局样式 ================= */
body {
  margin: 0;
  background: #f5f5f5; 
  font-family: Microsoft Yahei; 
  font-size: 14px; 
  min-width: 1000px; 
}

a {
  text-decoration: none; 
  color: #000;
}

/* ================= header ================= */
header {
  height: 90px; 
  background: white; 
  display: flex; /* 使用 flex 布局 */
  align-items: center;
}

.header-inner,
main {
  width: 1200px; /* 内部内容宽度 */
  margin: auto;
}

/* ================= 标签列表 ================= */
.tag-list {
  margin-top: 50px; 
  margin-bottom: 15px;
}

.tag-item {
  display: inline-block; /* 标签水平排列 */
  padding: 0 8px; 
  margin-right: 24px; 
  line-height: 26px; 
  color: #000; 
  text-decoration: none; 
}

.tag-active {
  background: var(--primary-color);
  color: white;
}

.tag-item:not(.tag-active):hover {
  color: var(--primary-color); /* 鼠标悬停变色 */
}

/* ================= 文字溢出处理 ================= */
.nowrap {
  max-width: 100%; 
  overflow: hidden; 
  text-overflow: ellipsis; /* 超出显示省略号 */
  white-space: nowrap; 
}

/* ================= 分区内部样式 ================= */
.section_inner {
  z-index: 2; 
  overflow: hidden; 
  background: linear-gradient(to top, #fff 0%, #f7f7f7 100%); /* 渐变背景 */
}

/* ================= 分区标题 ================= */
.section_title {
  position: relative;
  padding-top: 4.16667%;
  padding-bottom: 2%; 
}

/* ================= 首页标题 ================= */
.index_title {
  display: flex; /* 使用 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin: 0 auto;
  width: 200px; 
  height: 40px; 
}

/* ================= 首页图标文字 ================= */
.icon_txt {
  font-size: 35px; 
  letter-spacing: 10px;
}

/* ================= 首页标签模块 ================= */
.mod_index_tab {
  height: 50px; 
  text-align: center; 
  font-size: 0; 
}

.index_tab__item {
  display: inline-block;
  font-size: 15px; 
  margin: 0 24px; 
  color: #333; 
}

.index_tab__item--current {
  color: var(--primary-color); /* 当前标签高亮颜色 */
}

/* ================= 专辑列表 ================= */
.playlist {
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(5, 1fr); /* 五列等宽 */
  gap: 45px 15px; /* 行间距45px，列间距15px */
  margin-bottom: 45px; /* 底部间距 */
}

/* 专辑封面容器 */
.cover-wrap {
  display: flex; /* 使用 flex 布局 */
  position: relative; 
  overflow: hidden; 
  border-radius: 18px; /* 圆角 */
  width: 100%; 
  margin-bottom: 15px; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
}

/* 专辑封面图片 */
.cover-img {
  width: 100%;
  transition: all 0.75s; /* 缓慢动画 */
}

/* 遮罩层 */
.cover-mask {
  position: absolute; /* 绝对定位 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000; 
  opacity: 0;
  transition: all 0.5s;
}

/* 播放按钮 */
.cover-play {
  position: absolute; /* 绝对定位 */
  left: 50%;
  top: 50%;
  margin-left: -35px; 
  margin-top: -35px; 
  opacity: 0;
  transform: scale(0.7); 
  transition: all 0.5s; 
}

/* 鼠标悬停效果 */
.cover-wrap:hover .cover-mask {
  opacity: 0.2; /* 遮罩变半透明 */
}

.cover-wrap:hover .cover-play {
  opacity: 1; /* 播放按钮显示 */
  transform: scale(1); /* 放大到原始大小 */
}

.cover-wrap:hover .cover-img {
  transform: scale(1.07); /* 图片放大 */
}

/* 专辑标题 */
.album-title:hover {
  color: var(--primary-color); /* 悬停变色 */
}

/* 专辑作者 */
.album-author {
  color: #999; 
  line-height: 1.6; /* 行高 */
}

.album-author:hover {
  color: var(--primary-color); /* 悬停变色 */
}

/* 专辑时间 */
.album-time {
  color: #999; 
  font-size: 16px;
}

/* ================= 歌曲列表 ================= */
.new-songs-header {
    position: relative; /* 为绝对定位的按钮提供参考 */
    height: 50px;
    padding-left: 20px; /* 给按钮留空间 */
}

.play_all_btn {
    position: absolute;
    left: 18%;
    top: 93%;
    border-radius: 8px;
    font-size: 14px;
    padding: 0 23px;
    height: 38px;
    line-height: 38px;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}

.play_all_btn:hover {
    background-color: #31c27c;
    transform: scale(1.07); 
}


.songlist {
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  gap: 45px 15px; /* 行列间距 */
  margin-bottom: 45px; /* 底部间距 */
}

/* 单个歌曲项 */
.song {
  display: grid; /* 网格布局 */
  grid-template-columns: 80px 200px 80px; /* 封面/文字/时长 */
  align-items: center; 
  gap: 10px; 
  width: 100%;
}

/* 封面容器 */
.song-wrap {
  position: relative; /* 相对定位 */
  width: 80px;
  height: 80px;
  flex-shrink: 0; /* 不缩小 */
}

/* 封面图片 */
.song-img {
  width: 100%; 
  height: 100%;
  object-fit: cover; 
  border-radius: 8px; /* 圆角 */
}

/* 遮罩层 */
.song-mask {
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* 半透明黑色 */
  border-radius: 4px; /* 圆角 */
  opacity: 0; 
  transition: opacity 0.5s; /* 渐变动画 */
}

.song-wrap:hover .song-mask {
  opacity: 1; /* 悬停显示遮罩 */
}

/* 播放按钮 */
.song-play {
  position: absolute; /* 绝对定位 */
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%); /* 居中 */
  opacity: 0; 
  transition: opacity 0.3s; /* 动画 */
}

.song-wrap:hover .song-play {
  opacity: 1; /* 悬停显示 */
}

.song-wrap:hover .song-img {
  transform: scale(1.07); /* 悬停图片放大 */
}

/* 歌曲信息文字区 */
.song > div {
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

/* 歌名 */
.song-title {
  font-size: 16px;
  font-weight: 500; 
  color: #333; 
  text-decoration: none; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  max-width: 200px; 
}

.song-title:hover {
  color: var(--primary-color); /* 悬停变色 */
}

/* 歌手 */
.song-author {
  font-size: 14px;
  color: #999;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 超出显示省略号 */
  max-width: 200px; /* 最大宽度 */
  margin-top: 4px; 
}
/* 时长 */
.song-time {
  font-size: 16px;
  color: #999; /* 文字颜色 */
  text-align: right; /* 右对齐 */
}

/* ================= MV 列表 ================= */
.mvlist {
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(5, 1fr); /* 五列固定布局 */
  gap: 45px 15px; /* 行列间距 */
  margin-bottom: 45px; /* 底部间距 */
}

/* 单个 MV */
.mv {
  text-align: left; /* 左对齐文字 */
  font-size: 14px;
  color: #333;
  overflow: hidden; /* 超出隐藏 */
}

/* MV 图片容器 */
.mv-wrap {
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  width: 100%;
  margin-bottom: 15px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* MV 封面图片 */
.mv-img {
  width: 100%;
  height: 60%;
  object-fit: cover; /* 保持比例裁剪 */
  transition: transform 0.4s ease; /* 缓慢动画 */
  display: block;
}

.mv-wrap:hover .mv-img {
  transform: scale(1.08); /* 放大效果 */
}

/* MV 遮罩层 */
.mv-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 103%; /* 比图片稍高 */
  background: rgba(0, 0, 0, 0.2); /* 半透明遮罩 */
  opacity: 0; /* 初始隐藏 */
  transition: opacity 0.4s ease; /* 渐变动画 */
}

/* MV 播放按钮 */
.mv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mv-wrap:hover .mv-mask,
.mv-wrap:hover .mv-play {
  opacity: 1; /* 悬停显示遮罩和按钮 */
}

/* MV 标题 */
.mv-title {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: #000;
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mv-title:hover {
  color: var(--primary-color); /* 悬停变色 */
}

/* MV 作者 */
.mv-author {
  display: block;
  color: #666;
  font-size: 13px;
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 播放量或时间 */
.album-time {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}

/* ================= 分页 ================= */
.page {
  display: flex; /* flex布局 */
  align-items: center; 
  justify-content: center; 
}

.page-item {
  display: inline-block; /* 水平排列 */
  color: #a2a2a2;
  line-height: 50px; 
  padding: 0 20px; /* 内边距 */
  margin: 10px; /* 外边距 */
  font-size: 16px;
  border-radius: 15px; /* 圆角 */
}

.page-current,
.page-item:not(.page-more):hover {
  background: var(--primary-color); 
  color: white; /* 高亮文字颜色 */
}

/* ================= 页脚 ================= */
footer {
  margin-top: 60px; 
  background: #333; 
  height: 200px;
}
